<template>
  <div class="channel-edit">
    <div class="my-channel">
      <div class="title">
        <span>我的频道</span>
        <van-button @click="isEdit = !isEdit" size="mini" type="danger" plain>{{ isEdit ? '取消' : '编辑' }}</van-button>
      </div>
      <van-grid>
        <van-grid-item
          v-for="(item, index) in ownList"
          :key="item.id"
        >
        <span @click="intoChannel(index)" :class="{active: index === value}">{{ item.name }}</span>
        <van-icon @click="$emit('del', index)" v-show="isEdit && index != 0" class="close-icon" name="cross" />
      </van-grid-item>
      </van-grid>
    </div>

    <div class="my-channel">
      <div class="title">
        <span>可选频道</span>
      </div>
      <van-grid>
        <van-grid-item
          v-for="item in optionalList"
          :key="item.id"
          :text="item.name"
          @click="$emit('add', item)"
        ></van-grid-item>
      </van-grid>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    value: {
      type: Number,
      required: true
    },
    ownList: {
      type: Array,
      required: true
    },
    allList: {
      type: Array,
      required: true
    }
  },
  data () {
    return {
      isEdit: false
    }
  },

  methods: {
    intoChannel (index) {
      // 1. 隐藏这个sheet
      this.$emit('close')
      // 2. 把被点的下标传递给父
      this.$emit('input', index)
    }
  },

  computed: {
    // 可选频道
    optionalList () {
      // 遍历所有频道，找出除了我的频道以外的频道放到一个新数组里 -- 相当于是要对所有频道做过滤
      const list = this.allList.filter(v => {
        // 要让v不在ownList里才过滤出来
        const res = this.ownList.find(val => {
          if (v.id === val.id) {
            return true
          } else {
            return false
          }
          // 结果只有两种：要么是得到这个元素了(代表找到了，也就是得到true)，要么得到undefined(也就是没找到，得到false)
        })

        return res === undefined
      })

      return list
    }
  }
}
</script>

<style lang="scss" scoped>
.channel-edit {
  padding: 20px;
  .my-channel {
    .title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 50px;
    }
    .active {
      color: red;
    }
    .close-icon {
      position: absolute;
      right: 5px;
      top: 5px;
    }
  }
}
</style>
